<template>
  <el-row style="min-width: 1500px">
    <el-col :span="24">
      <div class="details_box">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid_head_basic_info">
              <div class="x-flex x-row-between">
                <div class="-title">基本信息</div>
                <el-button
                  size="small"
                  type="primary"
                  @click="currentComponentName = 'list'"
                  >返回上一页</el-button
                >
              </div>
              <div class="grid_head_basic_info--custom_table">
                <table v-if="Object.keys(editLsit).length > 0">
                  <tr>
                    <th>名称</th>
                    <td>{{ editLsit.programGuidesName }}</td>
                    <th>创建者</th>
                    <td>{{ editLsit.createdAccount }}</td>
                    <th>大小</th>
                    <td>{{ programGuidesSize }}MB</td>
                  </tr>
                  <tr>
                    <th>状态</th>
                    <td v-if="editLsit.auditStatus == 0" style="color: #e6a23c">
                      待审核
                    </td>
                    <td v-if="editLsit.auditStatus == 1" style="color: #67c23a">
                      审核通过
                    </td>
                    <td v-if="editLsit.auditStatus == 2" style="color: #f83930">
                      审核未通过
                    </td>
                    <td v-if="editLsit.auditStatus == 3" style="color: #909399">
                      已失效
                    </td>
                    <th>创建时间</th>
                    <td>{{ editLsit.creationDate }}</td>
                    <th></th>
                    <td></td>
                  </tr>
                </table>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="grid_content">
              <div class="-title">设备管理</div>
              <div class="grid_content--table">
                <el-table
                  :data="tableData"
                  :header-cell-style="{ background: '#F6F7F9' }"
                  :row-style="{ height: '64px' }"
                  height="calc(80vh - 364px)"
                  style="width: 100%"
                >
                  <el-table-column label="名称/编号">
                    <template #default="{ row }">
                      <span>{{ row.deviceName }}</span>
                      <div class="--no">{{ row.deviceNo }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="分辨率">
                    <template #default="{ row }">
                      <span>{{ row.width }} x {{ row.length }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="状态" prop="onlineStatus">
                    <template #default="{ row }">
                      <div class="x-flex">
                        <el-badge
                          :type="tableStatus.dgeType[row.onlineStatus]"
                          class="item"
                          style="line-height: 32px"
                          is-dot
                        />
                        <text class="x-m-l-4">{{
                          tableStatus.text[row.onlineStatus]
                        }}</text>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid_content">
              <div class="-title">节目列表</div>
              <div class="grid_content--table">
                <el-table
                  :data="tableList"
                  :header-cell-style="{ background: '#F6F7F9' }"
                  :row-style="{ height: '64px' }"
                  height="calc(80vh - 364px)"
                  style="width: 100%"
                >
                  <el-table-column label="序列" prop="id" width="65" />
                  <el-table-column
                    label="名称"
                    min-width="140px"
                    show-overflow-tooltip
                  >
                    <template #default="{ row }">
                      <div class="x-flex">
                        <el-image
                          src="https://kpen.oss-cn-shenzhen.aliyuncs.com/hudie.png"
                          fit="contain"
                          lazy
                          style="width: 28px; height: 28px; margin-right: 8px"
                        >
                          <template #error>
                            <div class="image-slot">
                              <img
                                src="https://kpen.oss-cn-shenzhen.aliyuncs.com/hudie.png"
                                style="
                                  width: 28px;
                                  height: 28px;
                                  margin-right: 8px;
                                "
                                alt=""
                              />
                            </div>
                          </template>
                        </el-image>

                        <el-text style="max-width: 82%" truncated
                          >{{ row.programName }}
                        </el-text>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="屏幕类型"
                    min-width="140px"
                    show-overflow-tooltip
                  >
                    <template #default="{ row }">
                      <div v-if="row.programType == 0">
                        单屏({{ row.longResolution }}x{{ row.wideResolution }})
                      </div>
                      <div v-if="row.programType == 1">双屏</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="大小"
                    min-width="140px"
                    show-overflow-tooltip
                  >
                    <template #default="{ row }">
                      <span v-if="(row.programSize = 0.0)">0M</span>
                      <span v-else>{{ row.programSize }}M</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="时间"
                    min-width="140px"
                    show-overflow-tooltip
                  >
                    <template #default="{ row }">
                      <span>{{ row.programTime }}s</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid_bottom_plan">
              <div class="-title">播放计划</div>
              <div class="grid_bottom_plan--table_info">
                <VerticalTable
                  v-if="dataList.length > 0"
                  :columns="columns"
                  :dataList="dataList"
                >
                  <template #mode="{ data }">
                    <div>
                      <span v-if="data.mode == 0">追加模式</span>
                      <span v-if="data.mode == 1">插播模式</span>
                      <span v-if="data.mode == 2">替换模式</span>
                    </div>
                  </template>
                  <template #selectWeek="{ data }">
                    <div>
                      {{ data.selectWeek }}
                    </div>
                  </template>
                </VerticalTable>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, onBeforeMount } from "vue";
import { storeToRefs } from "pinia";
import {
  VideoPlay,
  RefreshRight,
  Calendar,
  AlarmClock,
} from "@element-plus/icons-vue";
import { useAdvertising } from "@/store/advertisingRoute";
import VerticalTable from "@/components/VerticalTable.vue";
import { programEdit } from "../../api/advertising/index.ts";
const store = useAdvertising();
const { currentComponentName } = storeToRefs(store);

const tableData = ref([]);

const tableList = ref([]);
//table状态
const tableStatus = computed(() => {
  const text = {
    0: "在线",
    1: "离线",
  };
  const dgeType = {
    1: "danger",
    0: "success",
  };
  return { text, dgeType };
});

//第三步
const columns = [
  {
    title: "播放模式",
    key: "mode",
    icon: VideoPlay,
  },
  {
    title: "循环模式",
    key: "selectWeek",
    icon: RefreshRight,
  },
  {
    title: "有效时间",
    key: "effectiveTime",
    icon: Calendar,
  },
  {
    title: "时间段",
    key: "timeSlot",
    icon: AlarmClock,
  },
];

const dataList = ref<Array<object>>([]);
const editLsit = ref({});
const id = ref();
var programGuidesSize = ref("");
// 详情
const editlistInfo = async () => {
  id.value = localStorage.getItem("edit");
  let res = await programEdit(id.value);
  const tableResult = [res.data.data].map((item) => {
    const modeObj = {
      0: "追加模式",
      1: "插播模式",
      2: "替换模式",
    };
    const date = new Date(item.startDate);
    const dates = new Date(item.endDate);
    // 使用getFullYear()，getMonth()，getDate()等方法来获取年月日等信息
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从0开始，所以要加1
    const day = date.getDate();
    const hour = date.getHours();
    const minute = date.getMinutes();
    const second = date.getSeconds();
    // 使用getFullYear()，getMonth()，getDate()等方法来获取年月日等信息
    const years = dates.getFullYear();
    const months = dates.getMonth() + 1; // 月份从0开始，所以要加1
    const days = dates.getDate();
    const hours = dates.getHours();
    const minutes = dates.getMinutes();
    const seconds = dates.getSeconds();
    // 构造一个日期字符串
    const formattedDate = year + "年" + month + "月" + day + "日";
    const formattedDates = years + "年" + months + "月" + days + "日";
    // 数字转换为汉字的映射表
    const numToChinese = {
      0: "零",
      1: "周一",
      2: "周二",
      3: "周三",
      4: "周四",
      5: "周五",
      6: "周六",
      7: "周日",
      8: "八",
      9: "九",
    };
    /**
     * 将数字转换为汉字
     * @param {number} num 需要转换的数字
     * @returns {string} 转换后的汉字字符串
     */
    function convertNumToChinese(num) {
      const numStr = num.toString(); // 将数字转换为字符串
      let result = "";
      for (let i = 0; i < numStr.length; i++) {
        const ch = numToChinese[numStr[i]];
        result += ch;
      }
      return result;
    }
    return [
      { mode: item.mode },
      { selectWeek: convertNumToChinese(item.selectWeek) },
      { effectiveTime: formattedDate + "至" + formattedDates },
      { timeSlot: item.timeSlot },
    ];
  });
  const data = tableResult[0].map((item) => {
    if (item.selectWeek) {
      item.selectWeek = item.selectWeek
        .replace(/undefined/g, "  ,  ")
        .replace(/\s+/g, " ")
        .trim();
    }
    return item;
  });
  dataList.value = data;
  res.data.data.programList.forEach((item: any) => {
    // 将 fileSize 从字节转换为兆字节
    item.programSize = (item.programSize / (1024 * 1024)).toFixed(1); // 四舍五入保留两位小数
  });

  tableList.value = res.data.data.programList;
  tableData.value = res.data.data.deviceList;
  editLsit.value = res.data.data;
  programGuidesSize.value = (
    res.data.data.programGuidesSize /
    (1024 * 1024)
  ).toFixed(1);
};
onMounted(() => {
  editlistInfo();
});
</script>

<style lang="scss" scoped>
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
.details_box {
  width: 100%;
  height: calc(100vh - 100px);
  font-size: 14px;
}

.el-row {
  margin-bottom: 16px;
}

.el-col {
  border-radius: 8px;
}

.-title {
  font-weight: 500;
  color: #303233;
}

.grid_head_basic_info {
  min-height: 150px;
  border-radius: 8px;
  background-color: white;
  padding: 20px;
  overflow: hidden;

  &--custom_table {
    width: 100%;
    margin-top: 16px;

    th,
    td {
      border: 1px solid #dce0e6;
      padding: 7px 16px;
      height: 30px;
      line-height: 30px;
    }

    th {
      width: 3%;
      background-color: #f6f7f9;
    }

    td {
      width: 10%;
      background-color: #fff;
    }
  }
}

.grid_content {
  // height: 364px;
  border-radius: 8px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  font-size: 14px;
  position: relative;
  overflow: hidden;

  &--table {
    width: 100%;
    margin-top: 16px;

    .--no {
      color: #8a8e92;
    }
  }

  //&::after {
  //  content: '';
  //  position: absolute;
  //  top: 50%;
  //  right: 1px;
  //  transform: translateY(-30%);
  //  width: 6px;
  //  height: 90px;
  //  background-color: #DCE0E6;
  //  border-radius: 20px;
  //}
}
::v-deep .el-badge__content.is-dot {
  height: 8px;
  width: 8px;
  padding: 0px;
  right: 0px;
  top: 0px;
  border-radius: 50%;
}
.grid_bottom_plan {
  height: 285px;
  border-radius: 8px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;

  &--table_info {
    width: 100%;
    margin-top: 16px;

    th,
    td {
      border: 1px solid #dce0e6;
      padding: 7px 16px;
      height: 30px;
      line-height: 30px;
    }

    th {
      width: 1.2%;
      background-color: #f6f7f9;
      color: #5e6369;
      font-weight: 500;
    }

    td {
      width: 10%;
      background-color: #fff;
      color: #303233;
    }
  }
}
</style>
